<template>
  <el-form v-if="_config.show" :inline="true" size="small" :model="form" class="demo-form-inline">
    <el-form-item
      v-for="(item,idx) in formItems"
      :key="idx"
      :label-width="item.labelWidth"
      :label="item.label"
      :prop="item.prop"
      :rules="item.rules"
    >
      <component
        :is="item.tag"
        :ref="item.prop"
        v-model="form[item.prop]"
        v-bind="item.attributes"
        @keyup.enter.native="onSubmit"
      >
        <template v-if="item.tag === 'el-select' && item.attributes">
          <el-option
            v-for="(option) in item.attributes.options"
            :key="option.value"
            :label="option.label"
            :value="option.value"
          />
        </template>
      </component>
    </el-form-item>
    <el-form-item>
      <el-button icon="el-icon-search" type="primary" @click="onSubmit">查询</el-button>
    </el-form-item>
    <el-form-item type="primary">
      <el-button icon="el-icon-refresh" @click="onReset">重置</el-button>
    </el-form-item>
    <el-form-item>
      <ImportFile :import-config="$attrs['import-config']" />
    </el-form-item>
    <el-form-item>
      <ExportFile :form="form" :export-config="$attrs['export-config']" />
    </el-form-item>
  </el-form>
</template>

<script>
import ImportFile from './importFile.vue'
import ExportFile from './exportFile.vue'
export const elTimeSelect = 'el-time-select'
import { elInput, elSelect, elDatePicker, elCascader, elInputNumber, getElemMapping } from '../predefine'
export default {
  components: {
    ImportFile,
    ExportFile
  },
  inheritAttrs: false,
  props: {
    config: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  data() {
    return {
      form: {},
      defaultForm: {},
      formItems: []
    }
  },
  computed: {
    _config() {
      const defConfig = { show: true }
      return Object.assign({}, defConfig, this.config)
    }
  },
  watch: {
    config: {
      immediate: true,
      deep: true,
      handler(newVal) {
        if (!newVal) return
        const { formItems } = newVal
        if (!(Array.isArray(formItems) && formItems.length > 0)) return
        this.formItems = JSON.parse(JSON.stringify(formItems))
        const predefineMap = getElemMapping()
        this.formItems.forEach((item, idx) => {
          const { prop, tag, defaultVal, attributes } = item
          const predefine = predefineMap[tag]
          const placeholder = this.getPlaceholder(item)
          const { defaultProps } = predefine || {}
          const attr = Object.assign({}, defaultProps, { placeholder }, attributes)
          this.$set(this.formItems[idx], 'attributes', attr)
          this.$set(this.form, prop, defaultVal === undefined ? '' : defaultVal)
        })
        this.defaultForm = JSON.parse(JSON.stringify(this.form))
      }
    }
  },

  methods: {
    updateOptions(prop, options = []) {
      if (!prop || typeof prop !== 'string') throw new Error('key值不正确')
      const idx = this.formItems.findIndex((item) => {
        return item.prop === prop
      })
      if (idx === -1) throw new Error(`${prop}对应的表单项不存在`)
      this.$set(this.formItems[idx]['attributes'], 'options', options)
    },

    getPlaceholder(item = {}) {
      const { tag, label, placeholder } = item
      if (placeholder) return placeholder
      const text = typeof item.label === 'string' ? label : ''
      const inputTypes = [elInput, elInputNumber]
      if (inputTypes.includes(tag)) return '请输入' + text
      const selectTypes = [elSelect, elTimeSelect, elDatePicker, elCascader]
      if (selectTypes.includes(tag)) return '请选择' + text
    },

    onSubmit() {
      const { beforeSearch } = this._config
      const form = beforeSearch ? beforeSearch(this.form) : this.form
      this.$emit('onSubmit', { ...form })
    },
    onReset() {
      this.form = Object.assign({}, this.defaultForm)
      const { beforeSearch } = this._config
      const form = beforeSearch ? beforeSearch(this.form) : this.form
      this.$emit('onReset', { ...form })
    }

  }
}
</script>

